<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时任务</title>
		<script>
			// window代表浏览器=》浏览器对象模型
			// document代表当前网页文档=》文档对象模型
			// 1.延迟任务
			// setTimeout(function() {
			// 	alert('5秒钟之后弹出一个框')
			// }, 5000)
			// 2.周期任务
			// setInterval(function() {
				
			// }, 1000)
		</script>
	</head>
	<body>
		<div></div>
	</body>
	<script>
		let div = document.getElementsByTagName('div')[0]
		let time = 60
		div.innerText = time
		// 倒计时，最后10秒钟，数字变成红色
		// 任务的id，启动之后是一个独立的线程，不影响后续代码的执行
		let i = setInterval(function() {
			// 已经过了一秒钟
			time --
			div.innerText = time
			if(time <= 10) {
				div.style.color = 'red'
			}
			if(time <= 0) {
				clearInterval(i)
			}
		}, 1000)
		console.log('这里的代码需要等待60秒')
	</script>
</html>